<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        {{fruits[0]}}
        <h1 v-for='(item,index) in fruits'>
            每{{index+1}}种{{item}}
        </h1><br>
        <h2 v-for='(item,index) in list'>
            第{{index+1}}件事是{{item}}
        </h2><br>
        <h1 v-for="i in 11">
            {{i-1}}
        </h1>
        <!-- 对象  属性值  属性名称-->
        <h1 v-for="(value,key) in student">
         {{key}}：{{value}}
         
        </h1>
        <br>
        <ul>
            <li v-for="(item,index) in goods ">
                商品名称：{{item.name}}<br>
                商品价格：{{item.price}}
            </li>
        </ul><br>
        <table>
            <tr v-for="row in table">
                <td v-for="col in row"></td>
            </tr>
        </table>
    </div>
    <script>
        Vue.createApp({
            data(){
                return {
                    fruits:["苹果","香蕉","橙子","橘子"],//定义一个数组
                    list:['吃饭','睡觉','学习','运功'],
                    student:{
                        name:'张三',
                        clas:'软件技术2306'
                    },
                    // 商品列表
                    goods:[
                        {
                            name:'苹果',
                            price:8999,
                        },
                        {
                            name:'华为',
                            price:7999
                        },
                        {
                            name:"小米",
                            price:5299
                        }
                    ],
                    table:[
                    [
                        1,2,3,4,5,6
                    ],
                    [
                        1,2,3,4,5,7
                    ],
                    [
                        1,2,3,4,5,5
                    ],
                    ],
                }
            },
        }).mount('#app')
    </script>
</body>
</html>